<template>
	<view class="list-centen">
		<!-- #ifdef MP-WEIXIN -->
		<view class="input-view">
			<uni-icons class="input-uni-icon" type="search" size="24" color="#999" />
			<input confirm-type="search" class="nav-bar-input" :disabled="true" type="text" placeholder="输入搜索关键词"
				@tap="goSearch" />
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<Line/>
		<!-- #endif -->
		<view class="list">
			<scroll-view scroll-y="true" class="list-left" :style="{height: clentHeight}">
				<view v-for="(item,index) in leftData" :key="index" class="left-item"
					@tap="changeLeftTab(index,item.id)">
					<view class="left-name" :class="{'left-name-active':activeIndex === index}">
						{{item.name}}
					</view>
				</view>
			</scroll-view>
			<scroll-view scroll-y="true" class="list-right" :style="{height: clentHeight}">
				<view class="right-list" v-for="(item,index) in rightData" :key="index">
					<block v-for="(k,i) in item" :key="i">
						<view class="list-title">{{k.name}}</view>
						<view class="right-content">
							<view class="right-item" v-for="(j,idx) in k.list" :key="idx">
								<image class="right-img" :src="j.imgUrl" mode=""></image>
								<view class="right-name">{{j.name}}</view>
							</view>
						</view>
					</block>
				</view>
			</scroll-view>
		</view>
		<tabBar currentPage="list" />
	</view>
</template>

<script>
	import $http from "@/common/api/request.js"
	import Line from "@/components/Line/Line.vue"
	import tabBar from "@/components/tabBar/tabBar.vue"
	export default {
		data() {
			return {
				clentHeight: 0,
				activeIndex: 0,
				leftData: [],
				rightData: []
			};
		},
		onLoad() {
			this.getData()
		},
		onReady() {
			this.getClientHeight();
		},
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: "/pages/search/search"
			})
		},
		methods: {
			//处理滑动高度
			getClientHeight() {
				//获取系统信息
				const info = uni.getSystemInfoSync()
				//info.windowHeight: 获取可视化区域的高度,app会包含状态栏,小程序,H5不包含状态栏
				//info.statusBarHeight:获取状态栏的高度, app,小程序状态栏的高度,浏览器没有就是0
				// #ifdef APP-PLUS
				//app可视区域高度 - 状态栏高度 - 45(默认的navBar高度) - 自定义导航条的高度 uni.upx2px(80):rpx转xp,实际就是/2
				this.clentHeight = info.windowHeight - info.statusBarHeight - 45 + 'px';
				// #endif
				// #ifdef MP-WEIXIN
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.clentHeight = info.windowHeight - 60 -42 + 'px';
				// #endif
				// #ifdef H5
				//小程序和H5因为获取的可视区域高度不包含状态栏,所以只减去自定义组件的高度就行了
				this.clentHeight = info.windowHeight - 1 + 'px';
				// #endif
			},
			//点击左侧滚动栏
			changeLeftTab(i, id) {
				this.getData(id)
				this.activeIndex = i
			},
			//获取数据
			getData(id) {
				if (id === this.activeIndex + 1) {
					return
				}
				$http.request({
					url: "/goods/list"
				}).then(res => {
					let data = res.data.data
					let leftData = []
					let rightData = []
					data.forEach(v => {
						leftData.push({
							id: v.id,
							name: v.name
						})
						if (v.id === this.activeIndex + 1) {
							rightData.push(v.data)
						}
					})
					this.leftData = leftData
					this.rightData = rightData
				}).catch(err => {
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})
			},
			goSearch(){
				uni.navigateTo({
					url: "/pages/search/search"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP-WEIXIN */
	.input-view {
		display: flex;
		align-items: center;
		border-radius: 30rpx;
		width: 100%;
		height: 64rpx;
		margin: 10rpx 0;
		background-color: rgb(247, 247, 247);
		box-sizing: border-box;
		padding: 0 20rpx;
	
		.nav-bar-input {
			margin-left: 20rpx;
		}
	}

	/* #endif */

	.list {
		display: flex;

		.list-left {
			width: 200rpx;

			.left-item {
				border-bottom: 2rpx solid #FFFFFF;
				font-size: 28rpx;
				font-weight: bold;
				background-color: #F7F7F7;

				.left-name {
					padding: 30rpx 6rpx;
					text-align: center;
				}

				.left-name-active {
					border-left: 8rpx solid #49BDFB;
					background-color: #FFFFFF;
				}
			}
		}

		.list-right {
			flex: 1;
			padding-left: 30rpx;

			.right-list {
				.list-title {
					font-weight: bold;
				}

				.right-content {
					display: flex;
					flex-wrap: wrap;

					.right-item {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 10rpx;
						width: 150rpx;

						.right-img {
							width: 150rpx;
							height: 150rpx;
						}

						.right-name {
							padding: 16rpx 0;
						}
					}
				}
			}
		}
	}
</style>
